import '@/styles/index.less';

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(createPinia());
app.use(router);
app.mount("#app");

// document.querySelector(".main .explain-content .int-box .start-btn")?.addEventListener("click", function () {
// 	console.log("click");
// 	const video: HTMLVideoElement | null = document.querySelector(".explain-wrap .video-bg video");
// 	const box: HTMLElement | null = document.querySelector(".explain-wrap .explain-content");
// 	if (!box || !video) return;
// 	box.classList.add("hide");
// 	setTimeout(() => (box.style.display = "none"), 350);
// 	video.play();
// 	video.addEventListener("ended", function () {
// 		const startContent: HTMLElement | null = document.querySelector(".explain-wrap .startup-content");
// 		if (!startContent) return;
// 		startContent.classList.add("show");
// 		const startBtn: HTMLElement | null = document.querySelector(".explain-wrap .startup-content .int-box .start-btn");
// 		if (!startBtn) return;
// 		startBtn.addEventListener("click", function () {
// 		});
// 	});
// });

// 强制横屏
(function () {
	function flexible(): void {
		// const doc: HTMLElement = document.documentElement || document.body;
		const width: number = window.innerWidth;
		const height: number = window.innerHeight;
		const root: HTMLElement = document.getElementsByTagName("html")[0];
		const app: HTMLElement | null = document.getElementById("app");
		if (!app) return;

		// const { width, height } = doc.getBoundingClientRect();

		let rem: number = width / 10;

		if (width < height) {
			app.style.position = "absolute";
			app.style.width = `${height}px`;
			app.style.height = `${width}px`;
			app.style.left = `${-(height - width) / 2}px`;
			app.style.top = `${(height - width) / 2}px`;
			app.style.transform = "rotate(90deg)";
			app.style.transformOrigin = "50% 50%";
			rem = height / 10;
		} else {
			app.style.width = "100%";
			app.style.height = "100%";
			app.style.left = "0px";
			app.style.top = "0px";
			app.style.transform = "none";
		}

		root.style.fontSize = rem + "px";
		app.style.display = "block";
	}
	flexible();
	window.addEventListener("resize", flexible, false);
})();
